<template>
    <view class="container">
        <!-- 用户信息区域 -->
        <view class="user-box">
            <view class="user-bg">
                <view class="bg-pattern"></view>
            </view>
            <view class="user-content">
                <view class="user-main">
                    <view class="avatar-section">
                        <image class="user-avatar" :src="userAvatar" @error="handleAvatarError" mode="aspectFill">
                        </image>
                        <view class="avatar-badge">
                            <uni-icons type="checkmarkempty" size="12" color="#ffffff"></uni-icons>
                        </view>
                    </view>
                    <view class="user-details">
                        <view class="user-name">{{ userName || '未登录' }}</view>
                        <view class="user-desc">{{ userDesc || '请先登录账号' }}</view>
                        <view class="user-tags">
                            <view class="tag">
                                <uni-icons type="medal" size="12" color="#FF9500"></uni-icons>
                                <view class="tag-text">VIP用户</view>
                            </view>
                            <view class="tag">
                                <uni-icons type="star" size="12" color="#34C759"></uni-icons>
                                <view class="tag-text">活跃用户</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="user-actions">
                    <view class="action-btn" @click="handleEditProfile">
                        <uni-icons type="compose" size="16" color="#007AFF"></uni-icons>
                        <view class="action-text">编辑</view>
                    </view>
                    <view class="action-btn" @click="handleSettings">
                        <uni-icons type="gear" size="16" color="#666666"></uni-icons>
                        <view class="action-text">设置</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 统计模块 -->
        <view class="stats-box">
            <view class="stats-title">
                <view class="title-text">我的数据</view>
                <view class="refresh-text" @click="refreshStats">刷新</view>
            </view>
            <view class="stats-grid">
                <view class="stats-item" @click="handleStatsClick('votes')">
                    <view class="stats-icon">
                        <uni-icons type="checkbox-filled" size="24" color="#007AFF"></uni-icons>
                    </view>
                    <view class="stats-content">
                        <view class="stats-number">{{ statsData.totalVotes }}</view>
                        <view class="stats-label">参与投票</view>
                    </view>
                </view>
                <view class="stats-item" @click="handleStatsClick('works')">
                    <view class="stats-icon">
                        <uni-icons type="star-filled" size="24" color="#FF9500"></uni-icons>
                    </view>
                    <view class="stats-content">
                        <view class="stats-number">{{ statsData.totalWorks }}</view>
                        <view class="stats-label">我的作品</view>
                    </view>
                </view>
                <view class="stats-item" @click="handleStatsClick('favorites')">
                    <view class="stats-icon">
                        <uni-icons type="heart-filled" size="24" color="#FF3B30"></uni-icons>
                    </view>
                    <view class="stats-content">
                        <view class="stats-number">{{ statsData.totalFavorites }}</view>
                        <view class="stats-label">收藏数量</view>
                    </view>
                </view>
                <view class="stats-item" @click="handleStatsClick('points')">
                    <view class="stats-icon">
                        <uni-icons type="medal-filled" size="24" color="#34C759"></uni-icons>
                    </view>
                    <view class="stats-content">
                        <view class="stats-number">{{ statsData.totalPoints }}</view>
                        <view class="stats-label">积分奖励</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 功能列表区域 -->
        <view class="menu-box">
            <view v-if="isLoading" class="loading-box">
                <uni-icons type="spinner-cycle" size="30" color="#3c9cff"></uni-icons>
                <view class="loading-text">加载中...</view>
            </view>
            <view v-else-if="loadError" class="error-box">
                <uni-icons type="error" size="30" color="#dd524d"></uni-icons>
                <view class="error-text">{{ errorMessage }}</view>
                <button class="retry-btn" @click="loadMenuData">重试</button>
            </view>
            <view v-else class="menu-list">
                <view class="menu-item" v-for="(_item, _index) in menuList" :key="_index"
                    @click="handleMenuClick(_item)">
                    <view class="menu-item-left">
                        <uni-icons :type="_item.icon || 'help'" size="22" color="#3c9cff"></uni-icons>
                        <view class="menu-item-label">{{ _item.label }}</view>
                    </view>
                    <uni-icons type="forward" size="16" color="#bbb"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 提示弹窗 -->
        <view v-if="showToast" class="toast" :class="toastType">
            <view>{{ toastMessage }}</view>
        </view>

    </view>
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import PageBottom from '@/components/PageBottom.vue';

export default defineComponent({
    name: 'Center',
    components: {
        PageBottom
    },
    setup() {
        // ===== 响应式对象 =====
        // 用户数据
        const userAvatar = ref('/static/logo.png');
        const userName = ref('学生6540');
        const userDesc = ref('普通用户的身份信息');

        // 加载状态
        const isLoading = ref(false);
        const loadError = ref(false);
        const errorMessage = ref('');

        // 提示状态
        const showToast = ref(false);
        const toastMessage = ref('');
        const toastType = ref('');
        let toastTimer = null;

        // 统计数据
        const statsData = ref({
            totalVotes: 12,
            totalWorks: 5,
            totalFavorites: 23,
            totalPoints: 1280
        });

        // 菜单列表数据
        const menuList = ref([
            { icon: 'wallet', label: '我的订单', path: '/pages/order/list' },
            { icon: 'star', label: '我的收藏', path: '/pages/favorite/list' },
            { icon: 'staff', label: '人员管理', path: '/pages/staff/list' },
            { icon: 'medal', label: '我的证书', path: '/pages/certificate/list' },
            { icon: 'notification', label: '消息通知', path: '/pages/message/list' },
            { icon: 'headphones', label: '客服中心', path: '/pages/service/index' },
            { icon: 'gear', label: '系统设置', path: '/pages/settings/index' }
        ]);

        // ===== 方法函数 =====
        // 显示提示消息
        const showToastMessage = (message, type = 'info') => {
            // 清除旧定时器
            if (toastTimer) {
                clearTimeout(toastTimer);
            }

            // 设置新提示
            toastMessage.value = message;
            toastType.value = type;
            showToast.value = true;

            // 自动隐藏
            toastTimer = setTimeout(() => {
                showToast.value = false;
            }, 2000);
        };

        // 加载菜单数据
        const loadMenuData = async () => {
            isLoading.value = true;
            loadError.value = false;

            try {
                // 模拟异步加载
                await new Promise(resolve => setTimeout(resolve, 500));
                isLoading.value = false;
            } catch (error) {
                console.error('加载菜单数据失败:', error);
                isLoading.value = false;
                loadError.value = true;
                errorMessage.value = '加载失败，请重试';
            }
        };

        // 头像加载错误处理
        const handleAvatarError = () => {
            console.warn('头像加载失败，使用默认头像');
            userAvatar.value = '/static/image/default-avatar.png';
            showToastMessage('头像加载失败', 'warning');
        };

        // 菜单点击处理
        const handleMenuClick = (_item) => {
            if (!_item || !_item.path) {
                showToastMessage('无效的菜单项', 'error');
                return;
            }
            uni.reLaunch({
                url: _item.path,
                success: () => {
                    console.log('导航成功:', _item.path);
                },
                fail: (err) => {
                    console.error('导航失败:', err);
                    showToastMessage('页面跳转失败', 'error');
                }
            });
        };

        // 刷新统计数据
        const refreshStats = () => {
            showToastMessage('正在刷新数据...', 'info');
            // 模拟刷新数据
            setTimeout(() => {
                statsData.value = {
                    totalVotes: Math.floor(Math.random() * 50) + 10,
                    totalWorks: Math.floor(Math.random() * 20) + 3,
                    totalFavorites: Math.floor(Math.random() * 100) + 15,
                    totalPoints: Math.floor(Math.random() * 2000) + 800
                };
                showToastMessage('数据刷新成功', 'info');
            }, 1000);
        };

        // 统计项点击处理
        const handleStatsClick = (type) => {
            const routes = {
                votes: '/pages-vote/vote/List',
                works: '/pages-vote/entry/List',
                favorites: '/pages/favorite/list',
                points: '/pages/points/index'
            };

            if (routes[type]) {
                uni.navigateTo({
                    url: routes[type],
                    success: () => {
                        console.log('跳转到:', routes[type]);
                    },
                    fail: (err) => {
                        console.error('跳转失败:', err);
                        showToastMessage('页面跳转失败', 'error');
                    }
                });
            } else {
                showToastMessage('功能开发中', 'warning');
            }
        };

        // 编辑个人资料
        const handleEditProfile = () => {
            showToastMessage('编辑功能开发中', 'info');
        };

        // 设置
        const handleSettings = () => {
            uni.navigateTo({
                url: '/pages/settings/index',
                fail: () => {
                    showToastMessage('设置页面开发中', 'warning');
                }
            });
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
            // 由于使用了switchTab，这里不需要手动处理页面跳转
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            loadMenuData();
        });

        onUnmounted(() => {
            // 清除定时器
            if (toastTimer) {
                clearTimeout(toastTimer);
            }
        });

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            userAvatar,
            userName,
            userDesc,
            statsData,
            menuList,
            isLoading,
            loadError,
            errorMessage,
            showToast,
            toastMessage,
            toastType,

            // 方法函数
            handleAvatarError,
            handleMenuClick,
            loadMenuData,
            showToastMessage,
            handleTabClick,
            refreshStats,
            handleStatsClick,
            handleEditProfile,
            handleSettings
        };
    }
});
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8f8;
    position: relative;
    // 添加底部内边距，为导航栏留出空间
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

    .user-box {
        width: 100%;
        position: relative;
        padding-top: calc(var(--status-bar-height) + 44px + 20rpx);
        background: linear-gradient(135deg, #e8f5e8 0%, #d4f1f4 20%, #b8e6b8 40%, #a8edea 60%, #74b9ff 80%, #0984e3 100%);
        background: linear-gradient(135deg, #fad161 0%, #e69e05 100%);
        border-radius: 0 0 8rpx 8rpx;
        margin-bottom: 20rpx;
        overflow: hidden;

        .user-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.2;

            .bg-pattern {
                width: 100%;
                height: 100%;
                background-image:
                    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 3px, transparent 3px),
                    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.12) 2px, transparent 2px),
                    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 4px, transparent 4px),
                    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
                background-size: 60rpx 60rpx, 40rpx 40rpx, 80rpx 80rpx, 30rpx 30rpx;
            }
        }

        .user-content {
            position: relative;
            z-index: 1;
            padding: 40rpx 30rpx 50rpx;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .user-main {
                display: flex;
                align-items: center;
                flex: 1;

                .avatar-section {
                    position: relative;
                    margin-right: 30rpx;

                    .user-avatar {
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 50%;
                        border: 4rpx solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
                        background-color: #f0f0f0;
                    }

                    .avatar-badge {
                        position: absolute;
                        bottom: 8rpx;
                        right: 8rpx;
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        background: linear-gradient(45deg, #34C759, #30D158);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 2rpx solid #ffffff;
                        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
                    }
                }

                .user-details {
                    flex: 1;

                    .user-name {
                        font-size: 36rpx;
                        color: #2c3e50;
                        font-weight: 600;
                        margin-bottom: 8rpx;
                        text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
                    }

                    .user-desc {
                        font-size: 26rpx;
                        color: #34495e;
                        margin-bottom: 24rpx;
                    }

                    .user-tags {
                        display: flex;
                        gap: 12rpx;

                        .tag {
                            display: flex;
                            align-items: center;
                            background-color: rgba(255, 255, 255, 0.6);
                            padding: 6rpx 12rpx;
                            border-radius: 20rpx;
                            backdrop-filter: blur(10rpx);

                            .tag-text {
                                font-size: 22rpx;
                                color: #333333;
                                margin-left: 6rpx;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

            .user-actions {
                display: flex;
                flex-direction: column;
                gap: 16rpx;

                .action-btn {
                    display: flex;
                    align-items: center;
                    background-color: rgba(255, 255, 255, 0.6);
                    padding: 12rpx 16rpx;
                    border-radius: 24rpx;
                    backdrop-filter: blur(10rpx);
                    transition: all 0.2s;

                    &:active {
                        background-color: rgba(255, 255, 255, 0.8);
                        transform: scale(0.95);
                    }

                    .action-text {
                        font-size: 24rpx;
                        color: #333333;
                        margin-left: 8rpx;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .stats-box {
        margin: 0 20rpx 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        overflow: hidden;

        .stats-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx 30rpx 20rpx;
            border-bottom: 1rpx solid #f2f2f2;

            .title-text {
                font-size: 32rpx;
                font-weight: 600;
                color: #333333;
            }

            .refresh-text {
                font-size: 26rpx;
                color: #007AFF;
                padding: 8rpx 16rpx;
                border-radius: 20rpx;
                background-color: #f0f8ff;

                &:active {
                    background-color: #e6f3ff;
                }
            }
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rpx;
            background-color: #f2f2f2;

            .stats-item {
                background-color: #ffffff;
                padding: 30rpx 20rpx;
                display: flex;
                align-items: center;
                transition: background-color 0.2s;

                &:active {
                    background-color: #f9f9f9;
                }

                .stats-icon {
                    margin-right: 20rpx;
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #f8f9fa;
                }

                .stats-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .stats-number {
                        font-size: 32rpx;
                        font-weight: 600;
                        color: #333333;
                        margin-bottom: 8rpx;
                    }

                    .stats-label {
                        font-size: 24rpx;
                        color: #666666;
                    }
                }
            }
        }
    }

    .menu-box {
        margin: 0 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        overflow: hidden;
        min-height: 200rpx;

        .loading-box,
        .error-box {
            height: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .loading-text,
            .error-text {
                font-size: 28rpx;
                color: #999;
                margin-top: 20rpx;
            }

            .retry-btn {
                margin-top: 20rpx;
                background-color: #3c9cff;
                color: #fff;
                font-size: 26rpx;
                padding: 10rpx 30rpx;
                border-radius: 30rpx;
                border: none;
            }
        }

        .menu-list {
            .menu-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 32rpx 30rpx;
                border-bottom: 1rpx solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }

                &:active {
                    background-color: #f9f9f9;
                }

                .menu-item-left {
                    display: flex;
                    align-items: center;

                    .menu-item-label {
                        font-size: 28rpx;
                        color: #333333;
                        margin-left: 24rpx;
                    }
                }
            }
        }
    }

    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20rpx 40rpx;
        border-radius: 10rpx;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 28rpx;
        z-index: 9999;
        animation: fadeIn 0.3s, fadeOut 0.3s 1.7s;

        &.info {
            background-color: rgba(0, 0, 0, 0.7);
        }

        &.warning {
            background-color: rgba(240, 173, 78, 0.9);
        }

        &.error {
            background-color: rgba(221, 82, 77, 0.9);
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
</style>